{% extends "base.html" %}
{% load static %}
{% block title %}学员详情{% endblock %}
{##https://cx.mem.gov.cn/prod-api/certsearch/code#}
{#https://cx.mem.gov.cn/prod-api/certsearch/certInfo/netQuery?name=何健豪&searchType=1&idcardNum=440105199106135115&idcardTypeCode=01&code=8932&uuid=8cf51320ce5d4b40ab94ff8c09cada20&personTypeCode=03#}

{% block headjs %}

{% endblock %}

{% block content %}

    <div class="row ">
        <div class="col-md-12 ">
            <div class="card">
                <div class="row" style="margin: 12px">
                    <div class="col">
                        <div class="card" style="width: 18rem;">
                            <div class="card-header bg-gray">学员信息 学员Id:{{ Xueyuan_Detail_index.id }} |客户id：{{ Xueyuan_Detail_index.kehu.id }}</div>
                            <ul class="list-group list-group-flush">

                                <li class="list-group-item">学员姓名：{{ Xueyuan_Detail_index.kehu.username }}

                                    <span class="fa fa-edit ml-2" data-toggle="modal"
                                          data-target="#xueyuan_xiugaimotai"></span>
                                </li>
                                <li class="list-group-item">进班时间：{{ Xueyuan_Detail_index.xueyuan_jinbantime }}</li>

                                {% if Xueyuan_Detail_index.shenfenzheng %}
                                    <li class="list-group-item">身份证号：{{ Xueyuan_Detail_index.shenfenzheng }}</li>
                                {% else %}
                                    <li class="list-group-item">身份证号：{{ Xueyuan_Detail_index.kehu.kehuzilao.hujizhenghao }}</li>
                                {% endif %}
                                <li class="list-group-item">
                                    文化程度：{{ Xueyuan_Detail_index.get_wenhuachengdu_display }}</li>
                                {% if Xueyuan_Detail_index.jiguan %}
                                    <li class="list-group-item">籍贯：{{ Xueyuan_Detail_index.get_jiguan_display }}</li>
                                {% else %}
                                    <li class="list-group-item">籍贯：{{ Xueyuan_Detail_index.kehu.kehuzilao.get_hujileixing_display }}</li>
                                {% endif %}
                                <li class="list-group-item">学员拿证时间：{{ Xueyuan_Detail_index.xueyuan_zhengjian_opentime }}</li>
                                <li class="list-group-item">学员资格证到期时间：{{ Xueyuan_Detail_index.xueyuan_zhengjian_endtime }}</li>

                            </ul>
                        </div>
                        {# 修改资料的模态框#}

                          <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
                             aria-hidden="true" id="xueyuan_xiugaimotai">
                            <form id="update_Xueyuan_zongbiao_form">
                                {% csrf_token %}
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title h4" id="mySmallModalLabel">学员资料</h5>
                                        </div>
                                        <div class="modal-body">
                                          <!-- 这将以段落形式渲染整个表单 -->
                                        {% for KeHuedui in Xueyuan_zongbiao_form %}
                                            <div class="form-group">

                                                <label for="customerName">{{ KeHuedui.label_tag }}</label>
                                                {{ KeHuedui }}
                                            </div>
                                        {% endfor %}
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary" id="Xueyuan_zongbiao_form" name="form_key" value="Xueyuan_zongbiao_form">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>

                    <div class="col-9">


                        <div class="row">
                            <div class="col-3">
                                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                                     aria-orientation="vertical">
                                    <button class="nav-link active" id="v-pills-home-zhengshuimg-tab" data-toggle="pill"
                                            data-target="#v-pills-home-zhengshuimg" type="button" role="tab"
                                            aria-controls="v-pills-home" aria-selected="true">学员证书图片
                                    </button>
                                    <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill"
                                            data-target="#v-pills-profile" type="button" role="tab"
                                            aria-controls="v-pills-profile" aria-selected="false">学员附件
                                    </button>
                                    <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill"
                                            data-target="#v-pills-messages" type="button" role="tab"
                                            aria-controls="v-pills-messages" aria-selected="false">学员资格证说明
                                    </button>
                                    <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill"
                                            data-target="#v-pills-settings" type="button" role="tab"
                                            aria-controls="v-pills-settings" aria-selected="false">备注
                                    </button>
                                    <a class="nav-link btn btn-primary" id="v-pills-jiaowugenjinlog-tab" data-toggle="pill"
                                            data-target="#v-pills-jiaowugenjinlog" type="button" role="tab"
                                            aria-controls="v-pills-jiaowugenjinlog" aria-selected="false" href="#v-pills-jiaowugenjinlog" >教务跟进记录
                                    </a>
                                </div>
                            </div>
                            <div class="col-9 border p-2">
                                <div class="tab-content" id="v-pills-tabContent">
                                    <div class="tab-pane fade show active" id="v-pills-home-zhengshuimg" role="tabpanel"
                                         aria-labelledby="v-pills-home-zhengshuimg-tab">

                                        <button class="btn btn-primary" type="button" id="get-zhengshuimg">获取学员证书图片
                                        </button>
                                        <br/>
                                        <img src="" style="max-width:500px">

                                        <div id="zhengshuimg-result"></div>


                                    </div>
                                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
                                         aria-labelledby="v-pills-profile-tab">
                                        {% if Xueyuan_Detail_index.kehu.kehuzilao.fujian %}
                                        {% else %}
                                        {% endif %}
{#                        <a href="{{ Xueyuan_Detail_index.kehu.kehuzilao.fujian.url }}" class="btn btn-primary fa fa-save" type="button">下载附件</a>#}
                                    {% if Xueyuan_Detail_index.kehu.kehuzilao.fujian and Xueyuan_Detail_index.kehu.kehuzilao.fujian.url %}
    <a href="{{ Xueyuan_Detail_index.kehu.kehuzilao.fujian.url }}" class="btn btn-primary fa fa-save" type="button">下载附件</a>{{ Xueyuan_Detail_index.kehu.kehuzilao.fujian }}

{% else %}
    <!-- 这里可以显示一个替代消息，比如“没有附件可下载” -->
    <p>没有附件可下载</p>
{% endif %}

</div>
                                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
                                         aria-labelledby="v-pills-messages-tab">{{ tzzy_xueyuan_Detail.xueyuan_zhengjian_shouming|safe }}</div>
                                    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
                                         aria-labelledby="v-pills-settings-tab">{{ tzzy_xueyuan_Detail.beizhu|safe }}</div>
                                    <div class="tab-pane fade" id="v-pills-jiaowugenjinlog" role="tabpanel"
                                         aria-labelledby="v-pills-jiaowugenjinlog-tab">
                                        <div class="row mt-2">
                                            <div class="col">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title">教务跟进记录</h5>
                                                        <div class="card-text form mt-3">
                                                            <h5 class="card-title">添加教务跟进记录</h5>
                                                            <form method="post">
                                                                {% csrf_token %}
                                                                {{ jiaowu_genjinlogForm.as_p }}
                                                                <button class="btn btn-primary" type="submit" name="form_key" value="jiaowu_genjinlogForm">提交
                                                                </button>
                                                            </form>
                                                        </div>
                                                        <div class="card-text">

                                                            <ul class="list-group">
                                                                {% for jiaowu_genjinlog in jiaowu_genjinlog_list %}
                                                                    <li class="list-group-item">
                                                                        <p class="card-text">
                                                                            <span class="badge badge-primary badge-pill">{{ jiaowu_genjinlog.gengjin_time }}</span>
                                                                            <span class="badge badge-primary badge-pill">{{ jiaowu_genjinlog.addlog_user }}</span>
                                                                            {{ jiaowu_genjinlog.gengjin_content|safe }}

                                                                        </p>
                                                                    </li>
                                                                {% endfor %}

                                                            </ul>


                                                        </div>


                                                    </div>
                                                </div>


                                            </div>


                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </div>

{% include 'messages.html' %}


{% endblock %}

{% block footerjs %}
<script>
//// 自动设置当前日期和时间到datetime-local输入框
        window.onload = function () {
            var currentDateTime = new Date();
            var formattedDateTime = currentDateTime.toISOString().slice(0, 16);
            var datetimeLocalInputs = document.querySelectorAll('input[type="datetime-local"]');
            datetimeLocalInputs.forEach(function (input) {
                input.value = formattedDateTime;
            });
        };
</script>
<script>
  $(document).ready(function () {

        $('#Xueyuan_zongbiao_form').click(function (event) {
                event.preventDefault();
                // 阻止默认的提交行为（因为我们在AJAX中提交表单）
                event.preventDefault();
                // 获取表单数据并构建更新对象
                var formData = $('#update_Xueyuan_zongbiao_form').serializeArray();
                var updateData = {};
                $.each(formData, function (index, field) {
                    updateData[field.name] = field.value;
                });
                // 添加CSRF令牌（确保你的Django视图需要CSRF保护）
                updateData['csrfmiddlewaretoken'] = $('input[name=csrfmiddlewaretoken]').val();
                updateData['kehu'] = {{ Xueyuan_Detail_index.kehu.id }};
                // 发送POST请求发送POST请求更新客户资料
                $.ajax({
                    url: '{% url 'Xueyuan_Update' pk=Xueyuan_Detail_index.id %}', // 确保此处的customer.id能正确替换
                    type: 'POST',
                    data: updateData,
                    header: {'Content-Type': 'multipart/form-data'},
                    success: function (response) {
                        // 在这里处理响应结果
                        if (response.status === 'success') {
                            $('#message').html(response.message).removeClass('fade').addClass('show');
                            // 成功提示并关闭模态框
                            setTimeout(() => {
                                $('#message').alert('close');
                                $('#mySmallModalLabelkhgzm').modal('hide');
                            }, 8000);
                            // 刷新页面
                            location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // 在这里处理请求错误
                        console.error("请求失败: " + error);
                        // 在 #message div 中显示错误消息
                        $('#message').html("请求失败: " + error);
                    }
                });
            });

        });
</script>
    <script>
        document.getElementById('get-zhengshuimg').addEventListener('click', async function () {
            try {
                // 第一步：获取验证码
                const response1 = await fetch('https://cx.mem.gov.cn/wxcx/pages/certificateQuery/inquirySpecialCertificate?personTypeCode=03', {
                    method: 'GET',

                });

                if (!response1.ok) {
                    throw new Error('网络响应失败，无法获取验证码');
                }

                const data1 = await response1.json();
                console.log(data1);

                // 假设返回的JSON对象中的code是我们需要的验证码
                const code = data1.img.split('/').pop(); // 提取图片中的验证码，这里假设验证码是URL的最后一个部分
                const uuid = data1.uuid;

                // 第二步：使用验证码和其他参数获取证书信息
                const response2 = await fetch('https://cx.mem.gov.cn/prod-api/certsearch/certInfo/netQuery', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',

                    },
                    body: JSON.stringify({
                        name: '何健豪',
                        searchType: 1,
                        idcardNum: '440105199106135115',
                        idcardTypeCode: '01',
                        code: code,
                        uuid: uuid,
                        personTypeCode: '03'
                    })
                });

                if (!response2.ok) {
                    throw new Error('网络响应失败，无法获取证书信息');
                }

                const data2 = await response2.json();
                console.log(data2);

                // 假设data2包含了需要渲染到页面的信息
                const resultDiv = document.getElementById('zhengshuimg-result');
                resultDiv.innerHTML = `<p>消息: ${data2.msg}</p><p>图片URL: ${data2.img}</p>`;

            } catch (error) {
                console.error('请求失败:', error);
                const resultDiv = document.getElementById('zhengshuimg-result');
                resultDiv.innerHTML = `<p>请求失败: ${error.message}</p>`;
            }
        });
    </script>
{% endblock %}
